import { Swiper } from 'antd-mobile'
import { useEffect } from 'react'
import { useAppDispatch, useAppSelector } from '../../app/hooks'
import bannerStyle from './banner.module.css'
import { bannerList, hotWords, saveSwiperAsync, saveHotWordAsync } from '../../features/home/homeSlice'

export default function IndexBanner() {
  const dispatch = useAppDispatch()

  // 获取轮播图数据
  const swipers = useAppSelector(bannerList)
  const words = useAppSelector(hotWords)

  useEffect(() => {
    // 请求轮播图数据并将其保存到redux中
    dispatch(saveSwiperAsync())
    dispatch(saveHotWordAsync())
  }, [])

  return (
    <div className={bannerStyle.container}>
      {swipers.length > 0 && (
        <Swiper
          autoplay
          loop
          indicatorProps={{
            color: 'white'
          }}
          defaultIndex={1}
        >
          {swipers.map((s) => (
            <Swiper.Item key={s.id} onClick={() => {}}>
              <div>
                <img className={bannerStyle['banner-item']} src={s.advertImg} alt="" />
              </div>
            </Swiper.Item>
          ))}
        </Swiper>
      )}

      <div className={bannerStyle.tags}>
        {words.map((w) => (
          <div className={bannerStyle.tag} key={w.id}>
            {w.word}
          </div>
        ))}
      </div>
    </div>
  )
}
